Angular অ্যাপ্লিকেশনগুলিতে HTTP রিকোয়েস্ট করার সময় ত্রুটি বা error handling অত্যন্ত গুরুত্বপূর্ণ। যখন কোনো HTTP রিকোয়েস্ট ব্যর্থ হয়, তখন সঠিকভাবে ত্রুটি সনাক্ত করা, ব্যবহারকারীকে উপযুক্ত বার্তা দেখানো, এবং সমস্যা সমাধানের জন্য লজিক পরিচালনা করা প্রয়োজন। Angular এ HttpClient ব্যবহার করে HTTP রিকোয়েস্ট করা হয় এবং এর মাধ্যমে বিভিন্ন HTTP ত্রুটি সঠিকভাবে হ্যান্ডেল করা সম্ভব হয়।

1. Angular HttpClient ব্যবহার করে HTTP রিকোয়েস্ট করা

প্রথমে, HttpClient মডিউলটি আপনার অ্যাপ্লিকেশনে ইম্পোর্ট করতে হবে। এরপর HTTP রিকোয়েস্ট করার জন্য Angular এর HttpClient সার্ভিস ব্যবহার করা হয়।

HttpClientModule ইম্পোর্ট করা

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule, // HttpClientModule কে অ্যাপ্লিকেশনে ইম্পোর্ট করুন
  ]
})
export class AppModule { }

HTTP GET রিকোয়েস্টের উদাহরণ

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.apiUrl).pipe(
      catchError(this.handleError) // Error handling function
    );
  }

  private handleError(error: any): Observable<never> {
    console.error('HTTP error occurred:', error);  // Log the error
    throw error;  // Propagate the error
  }
}

এখানে, getData() মেথডে catchError অপারেটর ব্যবহার করা হয়েছে, যা কোনো HTTP ত্রুটি হলে handleError মেথডকে কল করবে।

2. HTTP ত্রুটি হ্যান্ডলিং (Error Handling)

যখন একটি HTTP রিকোয়েস্ট ব্যর্থ হয়, তখন ত্রুটি হ্যান্ডলিং সঠিকভাবে পরিচালনা করা প্রয়োজন। Angular এর catchError অপারেটর ব্যবহার করে HTTP ত্রুটি ধরা যায়। এখানে কিছু সাধারণ HTTP ত্রুটি এবং তাদের হ্যান্ডলিং পদ্ধতি উল্লেখ করা হলো:

২.১. Error Object Structure

HTTP ত্রুটির অবজেক্টের মধ্যে সাধারণত কিছু প্রপার্টি থাকে, যেমন:

• status: HTTP স্ট্যাটাস কোড (যেমন 404, 500, ইত্যাদি)
• statusText: ত্রুটির বর্ণনা (যেমন 'Not Found', 'Internal Server Error', ইত্যাদি)
• message: ত্রুটির বিস্তারিত বর্ণনা

২.২. Error Handling Example

import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

private handleError(error: any): Observable<never> {
  let errorMessage = '';

  if (error.error instanceof ErrorEvent) {
    // Client-side or network error
    errorMessage = `An error occurred: ${error.error.message}`;
  } else {
    // Server-side error
    errorMessage = `Backend returned code ${error.status}, ` +
                   `body was: ${error.error}`;
  }

  console.error(errorMessage);  // Log the error message
  alert(errorMessage);  // Optionally, display the error message to the user
  return throwError(errorMessage);  // Rethrow the error to the subscriber
}

এখানে:

• ErrorEvent যদি ক্লায়েন্ট সাইড বা নেটওয়ার্ক ত্রুটি হয়, তবে ত্রুটির বার্তা বের করা হয়।
• status যদি সার্ভার সাইড ত্রুটি হয়, তবে সার্ভার থেকে ফিরে আসা স্ট্যাটাস কোড এবং ত্রুটির বার্তা দেখানো হয়।
• throwError এর মাধ্যমে ত্রুটির বার্তাটি রিটার্ন করা হয়, যাতে সাবস্ক্রাইবাররা এই ত্রুটি ম্যানেজ করতে পারে।

3. HTTP ত্রুটি ধরার জন্য কাস্টম ইন্টারসেপ্টর ব্যবহার

Angular-এ HTTP Interceptors ব্যবহার করে সমস্ত HTTP রিকোয়েস্ট এবং রেসপন্সের আগে বা পরে কিছু কাজ করা যায়, যেমন ত্রুটি হ্যান্ডলিং, রিকোয়েস্ট হেডার মডিফাই করা ইত্যাদি।

HTTP Interceptor উদাহরণ:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error) => {
        let errorMessage = 'An unknown error occurred!';
        if (error.status === 404) {
          errorMessage = 'Requested resource not found!';
        } else if (error.status === 500) {
          errorMessage = 'Server error occurred!';
        }
        console.error(errorMessage);
        alert(errorMessage);
        return throwError(errorMessage);
      })
    );
  }
}

এই ইন্টারসেপ্টরটি সমস্ত HTTP রিকোয়েস্টের রেসপন্সে ত্রুটি ধরবে এবং সেই অনুযায়ী ত্রুটি বার্তা প্রদর্শন করবে।

ইন্টারসেপ্টর রেজিস্টার করা:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ]
})
export class AppModule { }

এটি Angular অ্যাপ্লিকেশনে ইন্টারসেপ্টরকে রেজিস্টার করবে, যাতে এটি HTTP রিকোয়েস্ট ও রেসপন্সের আগে বা পরে কাজ করতে পারে।

4. ব্যবহারকারীকে ত্রুটি জানানো

Angular অ্যাপ্লিকেশনগুলিতে ত্রুটি হ্যান্ডলিংয়ের সময় গুরুত্বপূর্ণ যে ব্যবহারকারীকে উপযুক্তভাবে ত্রুটি বার্তা দেখানো হয়। আপনি alert, toasts, বা UI ইন্ডিকেটর ব্যবহার করে ত্রুটি বার্তা দেখাতে পারেন।

উদাহরণ:

this.dataService.getData().subscribe({
  next: (data) => {
    this.data = data;
  },
  error: (err) => {
    this.errorMessage = 'An error occurred while fetching data.';
    console.error(err);
  }
});

এখানে, যদি ত্রুটি হয়, তবে errorMessage প্রপার্টি সেট করা হবে এবং ব্যবহারকারীকে উপযুক্ত বার্তা দেখানো হবে।

সারাংশ

Angular-এ HTTP রিকোয়েস্টের ত্রুটি হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ। catchError অপারেটর এবং HTTP Interceptors ব্যবহার করে আমরা HTTP ত্রুটি সঠিকভাবে ধরতে পারি এবং ব্যবহারকারীকে উপযুক্ত বার্তা প্রদান করতে পারি। ত্রুটি হ্যান্ডলিংয়ের মাধ্যমে অ্যাপ্লিকেশনটি আরও নির্ভরযোগ্য এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে।